<template>
    <div>
        <div class="navFoot">
            <div class="container">
                <div>
                    <div>
                        <img src="@/assets/svg/tubusi_w_foot_logo.svg" class="tubusiImg" />
                    </div>
                    <div class="sizeMin">图布斯距百年企业还有 88 年 10 月</div>
                    <div class="sizeTel">电话咨询 <span class="sizeMax">0314-2539999</span></div>
                    <div class="sizeSmall topSize">TIME:9:30-19:00</div>
                    <div></div>
                </div>
                <div v-for="(item, index) in serviceTypeList" :key="index">
                    <div class="sizeMin bottomSize">{{ item.name }}</div>
                    <div v-for="itemType in item.children" class="sizeSmall">{{ itemType.name }}</div>
                </div>

                <div>
                    <div class="qrcode"></div>
                    <div class="sizeTel serviceType">联系客服</div>
                </div>
            </div>
        </div>
        <div class="record">
            <span v-for="item in recordList" :key="item" class="recordSize">{{ item }}</span>
        </div>
    </div>
</template>

<script setup>
const serviceTypeList = ref([
    {
        name: "产品与服务",
        children: [
            {
                name: "云平台",
            },
            {
                name: "学习中心",
            },
            {
                name: "智能设备",
            },
        ],
    },
    {
        name: "设计方案",
        children: [
            {
                name: "地面花园",
            },
            {
                name: "露台花园",
            },
            {
                name: "下沉花园",
            },
            {
                name: "室内景观",
            },
        ],
    },
    {
        name: "关于我们",
        children: [
            {
                name: "新闻中心",
            },
            {
                name: "加入我们",
            },
            {
                name: "帮助文档",
            },
            {
                name: "安全和合规",
            },
            {
                name: "用户服务协议",
            },
            {
                name: "隐私政策",
            },
        ],
    },
]);
const recordList = ref(["© 2014-2025", "TUBUSI 图布斯科技集团", "冀ICP备2024053175号-3", "冀公网安备 13080302000110号"]);
</script>

<style lang="less" scoped>
.navFoot {
    width: 100%;
    height: 400px;
    background: var(--backWhite);
}
.record {
    width: 100%;
    height: 50px;
    background: var(--black);
    display: flex;
    align-items: center;
    justify-content: center;
}
.container {
    padding: 0 12%;
    width: 100%;
    padding-top: 59px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    margin-left: 50%;
    transform: translateX(-50%);
}
.tubusiImg {
    width: 200px;
    height: 28px;
    margin-bottom: 16px;
}
.bottomSize {
    margin-bottom: 24px;
}
.topSize {
    margin-top: 10px;
}
.sizeMin {
    font-weight: 500;
    font-size: 20px;
    color: var(--black);
    line-height: 28px;
}
.sizeSmall {
    font-weight: 400;
    font-size: 14px;
    color: var(--writLight);
    line-height: 20px;
    margin-bottom: 18px;
}
.qrcode {
    width: 160px;
    height: 160px;
    border: 1px solid var(--deepBlack);
}
.sizeTel {
    margin-top: 47px;
    font-weight: 500;
    font-size: 18px;
    color: var(--black);
    line-height: 25px;
    // margin: auto;
}
.sizeMax {
    font-weight: 500;
    font-size: 28px;
    color: var(--black);
    position: absolute;
    margin-left: 20px;
}
.serviceType {
    margin-left: 50%;
    transform: translateX(-50%);
    margin-top: 12px;
}

.recordSize {
    font-weight: 400;
    font-size: 14px;
    color: var(--white);
    line-height: 20px;
    margin: 20px;
}
</style>
